<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test click in inframe inside shadow element</title>
    <style>
        #light { margin-bottom: 1000px; };
    </style>
    <script>
        function addIframe(parent, scroll) {
            const iframe = document.createElement('iframe');
            iframe.src = './shadow_iframe_component.html' +
              ((scroll) ? '?scroll=true' : '');
            parent.appendChild(iframe);
        }
        function load() {
            const shadow = document.getElementById('shadow').attachShadow({ mode: 'open' });
            const shadow_scroll = document.getElementById('shadow_scroll').attachShadow({ mode: 'open' });
            const light = document.getElementById('light');
            addIframe(shadow, false);
            addIframe(light, false);
            addIframe(light_scroll, true);
            addIframe(shadow_scroll, true);
        }
    </script>
</head>

<body onload="load()">
    <div id="shadow"></div>
    <div id="light"></div>
    <div id="light_scroll"></div>
    <div id="shadow_scroll"></div>
</body>

</html>
